package com.dji.compose_learning.ui.view

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import androidx.paging.LoadState
import androidx.paging.compose.collectAsLazyPagingItems
import coil.compose.rememberImagePainter
import com.dji.compose_learning.net.InfoItem
import com.dji.compose_learning.viewmodel.LoadMoreViewModel
import com.google.accompanist.swiperefresh.SwipeRefresh
import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
import com.dji.compose_learning.utils.viewModel
import com.dji.compose_learning.R
import com.google.accompanist.swiperefresh.SwipeRefreshIndicator

@Composable
fun LoadMoreList() {
    val viewModel = viewModel<LoadMoreViewModel>()
    val lazyPagingItem = viewModel.repositorPager.collectAsLazyPagingItems()

    val state: LazyListState = rememberLazyListState()

    SwipeRefresh(
        indicator = { state, triger ->
            SwipeRefreshIndicator(
                state = state,
                refreshTriggerDistance = triger,
                contentColor = MaterialTheme.colorScheme.primary,
                scale = true)
        },
        state = rememberSwipeRefreshState((lazyPagingItem.loadState.refresh is LoadState.Loading && lazyPagingItem.itemCount > 0)),
        onRefresh = { lazyPagingItem.refresh() },
    ) {
        LazyColumn(
            state = state,
            contentPadding = PaddingValues(10.dp),
            verticalArrangement = Arrangement.spacedBy(5.dp)) {

            items(lazyPagingItem.itemCount) { index ->
                lazyPagingItem[index]?.let { infoItem ->
                    ItemView(item = infoItem)
                }
            }
            if (lazyPagingItem.loadState.append is LoadState.Loading) {
                //下一页的load状态
                item {
                    Box(modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)) {
                        LoadingView()
//                        CircularProgressIndicator(modifier = Modifier.align(alignment = Alignment.Center))
                    }
                }
            }
        }
    }

    if (lazyPagingItem.loadState.refresh is LoadState.Loading) {
        if (lazyPagingItem.itemCount == 0) {//第一次响应页面加载时的loading状态
            Box(modifier = Modifier.fillMaxSize()) {
//                CircularProgressIndicator(modifier = Modifier.align(alignment = Alignment.Center))
            }
        }
    } else if (lazyPagingItem.loadState.refresh is LoadState.Error) {
        //加载失败的错误页面
        Box(modifier = Modifier.fillMaxSize()) {
            Button(modifier = Modifier.align(alignment = Alignment.Center),
                onClick = { lazyPagingItem.refresh() }) {
                Text(text = "加载失败！请重试")
            }
        }
    }
}

@Composable
fun ItemView(item: InfoItem) {
    val painter = rememberImagePainter(data = item.owner.avatar_url) {
        crossfade(durationMillis = 1000)
        error(R.drawable.img)
        placeholder(R.drawable.img)
    }
    Row(modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp)) {
        Surface(shape = CircleShape,
            modifier = Modifier
                .size(66.dp)
                .align(Alignment.CenterVertically)) {
            Image(painter = painter, contentDescription = "",
                contentScale = ContentScale.Crop)
        }
        Spacer(modifier = Modifier.width(10.dp))
        Column(horizontalAlignment = Alignment.Start, verticalArrangement = Arrangement.Center) {
            Text(text = item.full_name, color = MaterialTheme.colorScheme.onBackground)
            Spacer(modifier = Modifier.height(10.dp))
            Text(text = item.git_url,
                color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.5f))
        }
    }
}

@Composable
fun LoadingView() {
    Row(modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically) {
        CircularProgressIndicator(modifier = Modifier.size(20.dp), strokeWidth = 3.dp)
        Spacer(modifier = Modifier.width(10.dp))
        Text(text = "Loading more...",
            color = MaterialTheme.colorScheme.primary,
            style = MaterialTheme.typography.bodyMedium)
    }
}


















